<template>
	<el-tabs
		v-model="activeName"
		@tab-click="handleClick"
		:stretch="true"
		class="el-tabs-medium"
	>
		<el-tab-pane label="样式" name="first">
			<el-scrollbar height="100%">
				<el-form
					ref="form"
					:model="form"
					label-width="80px"
					size="mini"
				>
					<el-collapse
						v-model="activeName1"
						accordion
						class="el-collapse-medium el-collapse-icon-left"
					>
						<el-collapse-item title="尺寸" name="1">
							<el-form-item label="宽度">
								<el-input v-model="form.width"></el-input>
							</el-form-item>
							<el-form-item label="高度">
								<el-input v-model="form.height"></el-input>
							</el-form-item>
						</el-collapse-item>
					</el-collapse>
				</el-form>
			</el-scrollbar>
		</el-tab-pane>
		<el-tab-pane label="事件" name="second">Config</el-tab-pane>
		<el-tab-pane label="数据" name="third">Role</el-tab-pane>
	</el-tabs>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, onUnmounted } from "vue";

export default defineComponent({
	components: {},
	setup(props: any, context: any) {
		// reactive 数据双向绑定
		const state = reactive({
			activeName: "first",
			activeName1: "1",
			form: {},
		});
		// 方法
		const methods = {
			handleClick() {},
		};
		// 页面加载完成
		onMounted(() => {});
		// 页面销毁完成
		onUnmounted(() => {});

		return {
			// toRefs转换为响应式数据
			...toRefs(state),
			...methods,
		};
	},
});
</script>